今天介紹 Vue 3 的 Provide/Inject

Provide

provide 最常用的 3個用法：

import { provide, ref, readonly } from 'vue'

export default {
    setup() {
    
        // 範例1，提供一個值
        provide('foo', 100)
        
        // 範例2，提供一個響應式物件
        // 以及提供一個修改方法
        const bar = ref(0);
        provide('bar', bar)
        provide('updateBar', () => bar.value++)
       
        // 範例3，提供一個僅讀的響應式物件
        const baz = ref('Hello!!')
        provide('baz', readonly(baz))
        
    }
}

Inject

延續上面 Provide 的範例，可以這樣使用 inject

import { inject } from 'vue'

export default {
  setup() {

    // inject 有2個參數
    // 第一個參數是必填的 key
    // 第二個參數是選填的 default 值
    const foo = inject('foo', 'Default value')
    const bar = inject('bar')
    const updateBar = inject('updateBar')
    const baz = inject('baz')

    return {
      foo,
      bar,
      updateBar,
      baz
    }
  }
}